<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="js/echart.min.js"></script>
    <script src="js/function.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="top-section">
        <ul class="horizontal-list">
            <li><a onclick="toggleSubMenu(1)">菜单1</a>
                <ul class="submenu" id="submenu1">
                    <li><a href="#" onclick="test2()">子菜单1</a></li>
                    <li><a href="#" onclick="test()">子菜单2</a></li>
                    <li><a href="#" onclick="test3()">子菜单3</a></li>
                </ul>
            </li>
            <li><a onclick="toggleSubMenu(2)">菜单2</a>
                <ul class="submenu" id="submenu2">
                    <li><a href="#">子菜单4</a></li>
                    <li><a href="#">子菜单5</a></li>
                    <li><a href="#">子菜单6</a></li>
                </ul>
            </li>
            <li><a onclick="toggleSubMenu(3)">菜单3</a>
                <ul class="submenu" id="submenu3">
                    <li><a href="#">子菜单7</a></li>
                    <li><a href="#">子菜单8</a></li>
                    <li><a href="#">子菜单9</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="chartContainer" class="bottom-section">


        <div class="sub-section">
            <div id='chart1' class="content">部分 1 的内容</div>
        </div>
        <div class="sub-section">
            <div id='chart2' class="content">部分 2 的内容</div>
        </div>
        <div class="sub-section">
            <div id='chart3' class="content">部分 3 的内容</div>
        </div>
        <div class="sub-section">
            <div id='chart4' class="content">部分 4 的内容</div>
        </div>
        <div class="sub-section">
            <div id='chart5' class="content">部分 5 的内容</div>
        </div>
        <div class="sub-section">
            <div id='chart6' class="content">部分 6 的内容</div>
        </div>

        <!-- 在这里放置你要展示的内容<button onclick="test()">按钮</button>
        <h1>展示区</h1>
        <p>这是右侧的展示区域。</p>
        <div id="main" style="width: 600px;height:400px;"></div> -->
    </div>
</body>

</html>